<template>
  <div class="main">
    <div class="root">
      <div class="title">
        <p>
          入库管理
        </p>
      </div>
      <div class="display_area">
        <div class="row">
          <div class="col big_col">订单流水</div>
          <div class="col small">索引</div>
          <div class="col big_col">订购厂商</div>
          <div class="col big_col">商品码</div>
          <div class="col big_col">品牌</div>
          <div class="col big_col">品名</div>
          <div class="col">单价</div>
          <div class="col">入库数量</div>
        </div>
        <div class="row" v-for="(enter_item,enter_index) in enters">
          <div class="col big_col">{{enter_item.order_number}}</div>
          <div class="col small">{{enter_item.index}}</div>
          <div class="col big_col">{{enter_item.factory}}</div>
          <div class="col big_col">{{enter_item.bar_code}}</div>
          <div class="col big_col">{{enter_item.brand}}</div>
          <div class="col big_col">{{enter_item.name}}</div>
          <div class="col">{{enter_item.unit_price}}</div>
          <div class="col"><input class="my_input" type="number" v-model="enter_item.count" @change="countChange(enter_index)"></div>
          <div class="col"><button @click="doEnter(enter_index)">入库</button></div>

        </div>
      </div>
      <div class="select_page">
        <div class="select_page_inner">
<!--          <div class="page_block"><div class="before"></div></div>-->
          <div class="number_block"><input type="number" v-model="page" class="my_input page_input" @change="change_page()">/{{this.page_count}}</div>
<!--          <div class="page_block"><div class="next"></div> </div>-->
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  import enterwareService from '../../service/apirla/enterware'
  export default {
    name: 'EnterWare',
    data () {
      return {
        enters: [
        ],
        page: 1,
        page_count: 5, // 总页数
        warehouseId: 1, // 仓库ID
        userName: 'apirla'
      }
    },
    async mounted () {
      let user = this.$store.getters.getLoginUser
      if (user == null)alert('请登录')
      this.username = user.name
      this.warehouseId = user.warehouseId
      alert("欢迎："+this.username+" 您的仓库id是"+this.warehouseId)
      this.page = 1
      let result = await enterwareService.getEnters(this.warehouseId,this.page) // 获取第一页
      this.page_count = result.data.pageCount
      this.enters = result.data.enters
      for (var i = 0; i < this.enters.length ; i++) {
        this.enters[i].count = this.enters[i].count - this.enters[i].finishiedEnterWare
      }

    },
    methods: {
      async change_page () {
        // 翻页
        // 1、判断是否超出范围
        // 2、向后端请求数据
        // 3、替换绑定数据
        // alert(this.page)
        if (this.page > this.page_count) {
          this.page = this.page_count;
        }
        if (this.page < 1) {
          this.page = 1
        }
        let result = await enterwareService.getEnters(this.warehouseId,this.page)
        this.page_count = result.data.pageCount
        this.enters = result.data.enters
        for (var i = 0; i < this.enters.length ; i++) {
          this.enters[i].count = this.enters[i].count - this.enters[i].finishiedEnterWare
        }

      },
      countChange ( index ) {
        if ( this.enters[index].count > this.enters[index].maxEnter ){
          this.enters[index].count = this.enters[index].maxEnter
          alert("您无法入库该商品超过["+this.enters[index].maxEnter+"]件")
        }
      },
      async doEnter ( index ) {
        // 进行入库
        // 边界检查
        if ( this.enters[index].count > this.enters[index].maxEnter ){
          this.enters[index].count = this.enters[index].maxEnter
          alert("您无法入库该商品超过["+this.enters[index].maxEnter+"]件")
          return
        }
        // 构建对象
        let data = {
          warehouseId: this.warehouseId,
          enter: this.enters[index],
          userName: this.userName
        }
        let result = await enterwareService.enterware(data)
        console.log(result)
        if (result == 'null'){
          alert('网络错误')
        }else if (result.data == '1'){
          alert("入库成功！")
        }else if(result.data == '2'){
          alert("不存在订单！")
        }else if (result.date == '3'){
          alert("数据错误，请与管理员联系！")
        }
        // 数据更新
        let result1 = await enterwareService.getEnters(this.warehouseId,this.page) // 获取第一页
        this.page_count = result1.data.pageCount
        this.enters = result1.data.enters
        for (var i = 0; i < this.enters.length ; i++) {
          this.enters[i].count = this.enters[i].count - this.enters[i].finishiedEnterWare
        }
      }
    }
  }
</script>
<style>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.root {
  background: white;
  box-shadow: 0px 0px 5px #888888;
}
.row {
  display: flex;
  width: 100%;
}

.col {
  width: 80px;
  overflow-x: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .small{
    width: 30px;
  }
  .big_col {
    width: 150px;
  }
  .my_input {
    width: 90%;
    height: 75%;
    background-color: transparent;
    text-align: center;
  }
.my_input_plus{
  border: 1px solid #ccc;
  padding: 7px 0px;
  border-radius: 3px;
  padding-left:5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
.my_input_plus:focus{
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
  .title {
    height: 50px;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }


.display_area {
  width: 1020px;
  height: 600px;
  /*background: #5ecc49;*/
}

.select_page {

  /*background: black;*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.page_block {
  width: 30px;
  height: 30px;
  /*border: 1px black solid;*/
  display: flex;
  justify-content: center;
  align-items: center;

}



.select_page_inner {
  width: 400px;
  display: flex;
  justify-content: center;
}

.before {
  width: 100%;
  height: 100%;
  background: url('~@/assets/img/before.png') no-repeat;
  background-size: 100%;

}

.next {
  width: 100%;
  height: 100%;
  background: url('../../assets/img/next.png') no-repeat ;
  background-size: 100%;
}

.page_input {
  width: 50px;
}

.number_block {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
